let apiTypeData = [{
        name: "全部",
        keyword: "身份证实名",
        isnew: false
    },
    {
        name: "生活服务",
        keyword: "银行卡",
        isnew: false
    },
    {
        name: "金融科技",
        keyword: "短信",
        isnew: false
    },
    {
        name: "交通地理",
        keyword: "天气",
        isnew: false
    },
    {
        name: "充值缴费",
        keyword: "短信",
        isnew: false
    },
    {
        name: "数据智能",
        keyword: "手机归属地",
        isnew: false
    },
    {
        name: "企业工商",
        keyword: "IP",
        isnew: false
    },
    {
        name: "应用开发",
        keyword: "手机归属地",
        isnew: false
    },
    {
        name: "电子商务",
        keyword: "IP",
        isnew: false
    },
    {
        name: "吃喝玩乐",
        keyword: "视频",
        isnew: false
    },
    {
        name: "文娱视频",
        keyword: "视频",
        isnew: false
    },
    {
        name: "免费接口大全",
        keyword: "短信",
        isnew: true
    },
    {
        name: "短信",
        keyword: "身份证实名",
        isnew: false
    },
    {
        name: "汽车",
        keyword: "银行卡",
        isnew: false
    },
    {
        name: "核验",
        keyword: "银行卡",
        isnew: false
    },
    {
        name: "最新发布",
        keyword: "银行卡",
        isnew: true
    },
    {
        name: "API私有化部署",
        keyword: "身份证实名",
        isnew: true
    },
]

// 遍历

//定义一个空的字符串保存标签
let apiText = '';
// 获取页面
let topBtn = document.querySelector('.top-btn')
apiTypeData.forEach(function (v) {
    apiText += `<button class="${v.isnew ? 'fwb' : ''}" data-keyword="${v.keyword}">${v.name}</button>`;
})
// 将数据渲染到页面
topBtn.innerHTML = apiText;

// 利用事件委派 点击按钮时将值赋给下面的文本
// 获取下面的文本和按钮
let txt = document.querySelector('#txt');
let input = document.querySelector('.top-inp input')
topBtn.addEventListener('click', function (e) {
    if (e.target.nodeName.toLowerCase() === 'button') {
        let topText = e.target.textContent;
        txt.textContent = topText;
        input.placeholder = e.target.dataset.keyword
    }
})



// 点击登录按钮 显示模态框

//获取按钮登录按钮与模态框
let maskLogin = document.querySelectorAll('#maskLogin');
let mask = document.querySelector('#mask');
let content = document.querySelector('#content');
// 点击登录显示模态框
maskLogin.forEach(function (dom) {
    dom.addEventListener('click', function () {
        mask.style.display = 'block'
    })
})
// 事件委派
mask.addEventListener('click', function (e) {
    if (e.target.id == 'mask') {
        mask.style.display = 'none'
    }
})
// 完成下面的布局
//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    {
        img: "API_01.jpg",
        name: "2021出行防疫政策指南",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_02.jpg",
        name: "身份证实名认证",
        price: "￥0.2000/次",
        isSpecial: true
    },
    {
        img: "API_03.jpg",
        name: "天气预报",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_04.jpg",
        name: "银行卡四元素校验",
        price: "￥0.3360/次",
        isSpecial: true
    },
    {
        img: "API_05.jpg",
        name: "短信API服务",
        price: "￥0.0400/次",
        isSpecial: true
    },

    //第二行
    {
        img: "API_01.jpg",
        name: "2021出行防疫政策指南",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_02.jpg",
        name: "身份证实名认证",
        price: "￥0.2000/次",
        isSpecial: true
    },
    {
        img: "API_03.jpg",
        name: "天气预报",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_04.jpg",
        name: "银行卡四元素校验",
        price: "￥0.3360/次",
        isSpecial: true
    },
    {
        img: "API_05.jpg",
        name: "短信API服务",
        price: "￥0.0400/次",
        isSpecial: true
    },
    //第三行
    {
        img: "API_01.jpg",
        name: "2021出行防疫政策指南",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_02.jpg",
        name: "身份证实名认证",
        price: "￥0.2000/次",
        isSpecial: true
    },
    {
        img: "API_03.jpg",
        name: "天气预报",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_04.jpg",
        name: "银行卡四元素校验",
        price: "￥0.3360/次",
        isSpecial: true
    },
    {
        img: "API_05.jpg",
        name: "短信API服务",
        price: "￥0.0400/次",
        isSpecial: true
    },
    //第四行
    {
        img: "API_01.jpg",
        name: "2021出行防疫政策指南",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_02.jpg",
        name: "身份证实名认证",
        price: "￥0.2000/次",
        isSpecial: true
    },
    {
        img: "API_03.jpg",
        name: "天气预报",
        price: "免费",
        isSpecial: false
    },
    {
        img: "API_04.jpg",
        name: "银行卡四元素校验",
        price: "￥0.3360/次",
        isSpecial: true
    },
    {
        img: "API_05.jpg",
        name: "短信API服务",
        price: "￥0.0400/次",
        isSpecial: true
    },

]
// 定义空的字符保存
let apiListN = '';
let apiBottomList = document.querySelector('.api-bottom-list')
listDataArr.forEach(function (v) {
    // console.log(v);
    apiListN += `
    <li>
        ${v.isSpecial ? '<span class="use">企业专用</span>':''}
        <span class="cont">
            <img src="../images/${v.img}" alt="">
            <span>${v.name}</span>
            <span class="${v.isSpecial ? 'charge':'free'}">${v.price}</span>
        </span>
        <button>申请数据</button>
    </li>
    `
})
apiBottomList.innerHTML = apiListN
// console.log(apiListN);
// 事件委派
apiBottomList.addEventListener('click', function (e) {
    if (e.target.nodeName.toLowerCase() === 'button') {
        mask.style.display = 'block'
    } else if (e.target.nodeName.toLowerCase() === 'li') {
        location.href = './APIlastdetailed.html'
    }
})




// 点击密码登录与扫码登录直接完成相互切换的效果
// 获取两个页面的信息
let inp = document.querySelector('#mask .inp');
let qR = document.querySelector('#mask .qR');
//获取账号登录与扫码登录
let account = document.querySelector('#account')
let saoMa = document.querySelector('#saoMa')
// 获取下划线
let decoration = document.querySelector('.decoration')
account.addEventListener('click', function () {
    inp.style.display = 'block';
    qR.style.display = 'none';
    decoration.style.left = 114 + 'px'
    account.classList.add('active')
    saoMa.classList.remove('active')
})
saoMa.addEventListener('click', function () {
    qR.style.display = 'block';
    inp.style.display = 'none';
    decoration.style.left = 236 + 'px'
    account.classList.remove('active')
    saoMa.classList.add('active')
})

// 判断两个输入框内是否输入了字符如果有字符就显示清空图标
// 获取清空图标
let userClear = document.querySelector('#userClear');
let pwdClear = document.querySelector('#pwdClear');
// 获取两个输入框
//账号
let user = document.querySelector('#user')
//密码
let pwd = document.querySelector('#pwd')
// 进行判断
// 当输入框发生变化时进行判断  使用input方法判断input状态
user.addEventListener('input', function () {
    if (user.value.length > 0) {
        // console.log(1);
        userClear.style.display = 'block'
    } else {
        // console.log(2);
        userClear.style.display = 'none';
    }
})
pwd.addEventListener('input', function () {
    if (pwd.value.length > 0) {
        // console.log(1);
        pwdClear.style.display = 'block'
    } else {
        // console.log(2);
        pwdClear.style.display = 'none';
    }
})
// 点击清空按钮时，清空输入框
userClear.addEventListener('click', function () {
    user.value = '';
    userClear.style.display = 'none';
})
pwdClear.addEventListener('click', function () {
    pwd.value = '';
    pwdClear.style.display = 'none';
})

// 点击登录按钮后进行依次判断 输入错误的提示错误
// 获取登录按钮
let loginBtn = document.querySelector('#loginBtn')
// 获取提示栏
let userTips = document.querySelector('#userTips')
let pwdTips = document.querySelector('#pwdTips')
loginBtn.addEventListener('click', function () {
    let userReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
    let pwdReg = /^\d{6}$/

    // console.log(!userReg.test(user.value))
    if (!userReg.test(user.value)) {
        userTips.style.display = 'block';
        userTips.textContent = '您输入的手机号不正确'
    } else if (!pwdReg.test(pwd.value)) {
        userTips.style.display = 'none';
        pwdTips.style.display = 'block';
        pwdTips.textContent = '您的密码不符合要求，密码要是6位数字'
    } else {
        userTips.style.display = 'none';
        pwdTips.style.display = 'none';
        location.href = '../page/home.html'
    }
})